<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米模块案例</title>
    <style>
        /* 1、将全局内外边距消除 ul标签消去*/
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /* 2、设置版心装载盒子 */
        .everone {
            /* 3、将版心顶栏居中 */
            margin: 0 auto;
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
            /* padding: 14px; */

        }
        /* 4、设置左盒子 */
        .left {
            /* 5、将左盒子向左浮动 */
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
        }
        /* 6、设置右盒子 */
        .right {
            /* 7、将右盒子向右浮动 */
            float: right;
            width: 978px;
            height: 614px;
        }
        /* 8、设置右盒子包裹的li */
        .right li {
            /*9、 li标签在右盒子左浮动 */
            float: left;
            /* 10、设置各个盒子之间的间隔 */
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;background-color: #87ceeb;
        }
        /* 11、设置li标签发现超出右盒子的高宽，发现有两个盒子自动换行 
            解决方法设立li标签伪元素。将其第4第8右外边距消除
            */
        .right li:nth-child(4n) {
            
            margin-right: 0;
        }
    </style>
</head>

<body>
    <div class="everone">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>

            </ul>
        </div>
    </div>
</body>

</html>